<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/login-page.css" />
	</head>
	<body>
		<div class="web">
			<!---------------头部----------------->
			<header class="bottom-border">
				<div class="header-btn"><a href="javascript:void(0)">取消</a></div>
				<div class="header-title">登录</div>
				<div></div>
			</header>
			<!---------------内容----------------->
			<div class="content">
				<div class="logoImg">
				</div>
				<form action="" method="post" onsubmit="return tip();">
					<div class="form-wrap">
						<div class="username">
							<p>账号</p>
							<input id="username" type="text" name="username" placeholder="请输入手机号码"/>
						</div>
						<div class="password">
							<p>密码</p>
							<input id="pwd" type="password" name="pwd"placeholder="请输入密码" />
						</div>
					</div>
					
					<input type="submit" class="submit-btn" value="登&nbsp;&nbsp;录">
				</form>
				
				<div class="login-tips">
					<a href="reg-page.html">注册用户</a>
					<a href="findpwd.html">忘记密码</a>
				</div>
				<!--弹窗-->
				<div class="login-tip">
					<div class="face">
						<img src="img/login-fail.png" alt="" />
					</div>
					<p></p>
				</div>
			</div>
			<!---------------脚部----------------->
			<footer>
				<div><a href="javascript:void(0)"><span></span>微信登录</a></div>
				<div class="line"></div>
				<div><a href="javascript:void(0)" class="qq"><span></span>QQ登录</a></div>
			</footer>
		</div>
		<script>
			function tip(){
				console.log(0);
				var username = document.querySelector("#username");
				var pwd = document.querySelector("#pwd");
				var p = document.querySelector(".login-tip>p");
				var tips = document.querySelector(".login-tip");
				if(username.value==""||username.value==null){
					tips.style.display="block";
					p.innerText="用户名不能为空！";
					console.log(1);
					setTimeout(function(){
						tips.style.display="none";
					},5000)
					return false;
				}
				if(pwd.value==""||pwd.value==undefined){
					tips.style.display="block";
					p.innerText="密码不能为空！";
					setTimeout(function(){
						tips.style.display="none";
					},5000)
					
					return false;
				}
				return true;
			}
		</script>
	</body>
</html>
